<template>
	<div class="box">
		<div class="input-box">
			<el-form
				ref="formRef"
				style="max-width: 600px"
				:model="ruleForm"
				:rules="rules"
				label-width="auto"
				class="demo-ruleForm"
				status-icon
				label-position="left"
			>
				<el-form-item label="姓名" prop="name">
					<el-input v-model="ruleForm.name" clearable />
				</el-form-item>
				<el-form-item label="身份证" prop="idCard">
					<el-input v-model="ruleForm.idCard" clearable />
				</el-form-item>
				<el-form-item label="开发商统一信用代码" prop="creditCode">
					<el-input v-model="ruleForm.creditCode" clearable />
				</el-form-item>
				<el-form-item label="开发商单位名称" prop="company">
					<el-input v-model="ruleForm.company" clearable />
				</el-form-item>
				<el-form-item label="事项名称" prop="itemName">
					<el-input v-model="ruleForm.itemName" clearable />
				</el-form-item>
				<el-form-item>
					<div style="display: flex; justify-content: space-between; width: 100%">
						<el-button :disabled="disabled" style="flex: 1" type="success" @click="getData(formRef)">查询</el-button>
						<el-button v-show="showBtn" style="flex: 1" type="primary" @click="submitForm">提交</el-button>
					</div>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue'
	import { ElMessage, FormInstance, FormRules } from 'element-plus'
	import { useRoute } from 'vue-router'
	import { DepositInit, GetProjectInfo, SubmitDeposit } from '@/api/apis.ts'
	import { throttle, thru } from 'lodash'

	interface RuleForm {
		name: string
		idCard: string
		creditCode: string
		company: string
		itemName: string
	}
	const formRef = ref<FormInstance>()
	/*
	*
	name: '李四',
		idCard: '370101199001014111',
		creditCode: '114403006955832485',
		company: '系统开发公司',
		itemName: '就业登记',
	* */
	let ruleForm = ref<RuleForm>({
		name: '',
		idCard: '',
		creditCode: '',
		company: '',
		itemName: '',
	})
	const rules = reactive<FormRules<RuleForm>>({
		name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
		idCard: [
			{ required: true, message: '请输入身份证', trigger: 'blur' },
			{
				pattern:
					/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
				message: '证件号码格式有误！',
				trigger: 'blur',
			},
		],
		creditCode: [{ required: true, message: '请输入开发商统一信用代码', trigger: 'blur' }],
		company: [{ required: true, message: '请输入开发商单位名称', trigger: 'blur' }],
		itemName: [{ required: true, message: '请输入事项名称', trigger: 'blur' }],
	})

	let token = ''
	const disabled = ref(true)
	const showBtn = ref(false)
	let allInfoId = 1
	const route = useRoute()
	const getData = throttle((formEl: FormInstance | undefined) => {
		if (!formEl) return
		formEl.validate(async (valid) => {
			if (valid) {
				const { data } = await GetProjectInfo({
					token,
					contractorCreditCode: ruleForm.value.creditCode,
					contractorUnitName: ruleForm.value.company,
					operatorId: ruleForm.value.idCard,
					operatorName: ruleForm.value.name,
					itemName: ruleForm.value.itemName,
				})
				console.log(data)
				if (data.code == 200) {
					showBtn.value = true
					allInfoId = data.data.id
				}
			} else {
				console.log('error submit!')
			}
		})
	},500)
	const init = async () => {
		const query = route.query
		const res = await DepositInit(query.sign, query.token, query.timestamp)
		if (res.data.code == 200) {
			token = query.token
			disabled.value = false
		} else {
			ElMessage({
				type: 'error',
				message: res.data.message,
			})
		}
	}
	onMounted(() => {
		init()
	})
	const submitForm = throttle(async () => {
		const { data } = await SubmitDeposit(allInfoId)
		if (data.code == 200) {
			ElMessage({
				type: 'success',
				message: '提交成功',
			})
			ruleForm.value = {
				name: '',
				idCard: '',
				creditCode: '',
				company: '',
				itemName: '',
			}
		} else {
			ElMessage({
				type: 'error',
				message: data.message,
			})
		}
	},500)
</script>

<style scoped lang="scss">
	.box {
		padding: 20px;
		.input-box {
			margin: 50px auto;
			width: 600px;
			height: 600px;
		}
	}
</style>
